Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve tags UI #630

Merged
merged 4 commits into from
May 14, 2024
Merged

Improve tags UI #630

merged 4 commits into from
May 14, 2024

Conversation

t-hamano
Copy link
Contributor

Inspired by #495

This PR replaces the tag's input UI from a text field to a FormTokenField component.

76ac407043b2761675731f70ff8839bf.mp4

I believe this UI will have the following benefits:

  • Tags have a background color, improving visibility
  • In addition to commas, you can use the enter key to complete tag entry.
  • Can prevent registration of duplicate tags

Also, this PR is intended to change only the UI, so there are no internal changes. If this PR is considered the first step in improving the UI, I think the ideal UI logic is as follows:

  • Show theme tag label instead of theme tag slug
  • Sort the existing tag list into theme tags and custom tags and separate input fields.
  • Regarding theme tags, those that are equal to the array obtained from the get_theme_feature_list() function are displayed as candidates, and tags that are not included in that array are not allowed.

Below is a mockup suggestion.

image

Testing Instructions

  • In the trunk branch, register some tags.
  • If you switch to this branch, your tags should remain fine.
  • Verify that entering and saving tags work correctly in this branch.

@t-hamano t-hamano changed the title Improve tags ui Improve tags UI May 12, 2024
@pbking
Copy link
Contributor

pbking commented May 13, 2024

A great improvement!

Could we use the opportunity to point to more details about the tags?

https://make.wordpress.org/themes/handbook/review/required/theme-tags/

I tried something like the below (so that the style would match the Plugins bit below it) but I'm not sure that's the best way to do that. :?

<ExternalLink href="https://make.wordpress.org/themes/handbook/review/required/theme-tags/" style={{fontSize:'12px', marginTop:'-20px'}}>
	{ __( 'Read more.', 'create-block-theme' ) }
</ExternalLink>

pbking
pbking approved these changes May 13, 2024
View reviewed changes
Copy link
Contributor

@pbking pbking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a very good, simple change. With the added link to tags info I think this is ready to bring in.

@t-hamano
Copy link
Contributor Author

t-hamano commented May 13, 2024 •
edited
Loading

I was also just working on updating this PR. I think we need to further align the focus outline to the text.

image

@t-hamano
Copy link
Contributor Author

How about this?

image

@pbking
Copy link
Contributor

pbking commented May 13, 2024

👍

Good change I like it.

🚢

vcanales
vcanales approved these changes May 13, 2024
View reviewed changes
Copy link
Member

@vcanales vcanales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. @t-hamano feel free to merge when you're ready.

@t-hamano t-hamano merged commit cd7f1ec into trunk May 14, 2024
2 checks passed
@t-hamano t-hamano deleted the improve-tags-ui branch May 14, 2024 01:45
@MaggieCabrera MaggieCabrera mentioned this pull request Sep 20, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vcanales vcanales vcanales approved these changes

@pbking pbking pbking approved these changes

Assignees
No one assigned
Labels
None yet
Projects
Create Block Theme Release Planning
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@t-hamano @pbking @vcanales